<template>
    <div class='product'>
      <div class="bgcolor"></div>
      <h4 class="title">--新品推荐--<router-link to="/" tag="p">更多尖货 ></router-link></h4>
      <swiper :options='swiperOption'  class='slider'>
        <swiper-slide v-for='(item,index) in items' :key='index'>
          <router-link :to='{name:item.href}'>
            <img :src='item.src' class='slider-img'>
          </router-link>
        </swiper-slide>
        <div class='swiper-pagination'  slot='pagination'></div>
      </swiper>
    </div>
</template>

<script>
export default {
  name: 'homeProduct',
  data () {
    return {
      items: [{
        href: 'home',
        src: '//img12.360buyimg.com/jrpmobile/jfs/t13963/267/2355123229/48850/254f797a/5a3c59aeN9cb550f6.jpg?width=335&height=421'
      }, {
        href: 'home',
        src: '//img12.360buyimg.com/jrpmobile/jfs/t13021/306/1996997425/21953/bda69db3/5a2f6a17N9da099b1.jpg?width=335&height=421'
      }, {
        href: 'home',
        src: '//img12.360buyimg.com/jrpmobile/jfs/t14125/310/1997192193/46667/3c910f8b/5a2f6a36Nad95b650.jpg?width=335&height=421'
      }, {
        href: 'home',
        src: '//img12.360buyimg.com/jrpmobile/jfs/t15784/188/381232069/39444/8878571d/5a2f6a4aNbd5a574c.jpg?width=335&height=421'
      }],
      swiperOption: {
        slidesPerView: 2.3,
        spaceBetween: 15,
        freeMode: true
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/css/varibles.styl'
  @import '../../assets/css/mixins.styl'
  .bgcolor
    pdTop()
  .title
    jdTitle()
  h4
    p
       position:relative
       z-index:2
       right:0rem
       top:-1.2rem
       color:#999
       font-size:.28rem
       height:.8rem
       font-weight:100
       text-align:right
       margin-right:.2rem
  .slider
    height:0
    overflow:hidden
    background:#eaeaea
    width:100%
    padding-bottom:54.4%
    .slider-img
      width:100%
      padding:.2rem 0 2rem 0
</style>
